<!DOCTYPE html>
<!-- saved from url=(0064)https://yy123.ink/blog/upload/preview/201912krimg7094/index.html -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>🔞的🫀️洪雪😘</title>
    <script src="./src/jquery.min.js" type="text/javascript"></script>
    <script src="./src/jquery.fireworks.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        html {
            width: 100%;
            height: 100%;
        }

        body {
            max-width: 600px;
            margin: 0 auto;
            background: #0b3443;
            color: #f0f0f0;
        }

        .share_img {
            width: 0;
            height: 0;
            overflow: hidden;
            opacity: 0;
        }

        .content {
            padding: 80px 20px;
        }

        .text_wrapper {
            display: -webkit-box;
            display: flex;
        }

        .text_wrapper .text {
            padding-top: 20px;
            padding-left: 20px;
        }

        .hide {
            display: none !important;
        }

        p {
            margin: 0;
        }

        .btn-groups {
            padding-right: 20px;
            text-align: center;
        }

        .heart-btn {
            display: inline-block;
            animation: breath 0.8s linear 0s infinite both;
            -webkit-animation: breath 0.8s linear 0s infinite both;
        }

        .btn {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 60px;
            margin: 0 30px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .btn span {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 60px;
            margin-top: -10px;
            margin-left: -10px;
            text-align: center;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }

        .btn-a {
            background: #d26ae5;
        }

        .btn-b {
            background: #c9c9c9;
        }

        .btn-a:before {
            content: '';
            position: absolute;
            display: block;
            width: 30px;
            height: 60px;
            background: #d26ae5;
            left: -29px;
            top: 0;
            border-top-left-radius: 60px;
            border-bottom-left-radius: 60px;
        }

        .btn-a:after {
            content: '';
            position: absolute;
            display: block;
            width: 60px;
            height: 30px;
            background: #d26ae5;
            left: 0;
            top: -29px;
            border-top-left-radius: 60px;
            border-top-right-radius: 60px;
        }

        .btn-b:before {
            content: '';
            position: absolute;
            display: block;
            width: 30px;
            height: 60px;
            background: #c9c9c9;
            left: -29px;
            top: 0;
            border-top-left-radius: 60px;
            border-bottom-left-radius: 60px;
        }

        .btn-b:after {
            content: '';
            position: absolute;
            display: block;
            width: 60px;
            height: 30px;
            background: #c9c9c9;
            left: 0;
            top: -29px;
            border-top-left-radius: 60px;
            border-top-right-radius: 60px;
        }

        .container {
        }

        .container .mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
        }

        .container .modal {
            width: 80%;
            height: 160px;
            position: absolute;
            top: 50%;
            left: 50%;
            padding: 20px 15px;
            border-radius: 5px;
            transform: translate(-50%, -70%);
            -webkit-transform: translate(-50% ，-70%);
            background: #f3f3f3;
        }

        .container .modal p {
            margin-top: 20px;
            margin-bottom: 20px;
            font-size: 16px;
            color: #353535;
            text-align: center;
        }

        .confirm {
            display: block;
            width: 120px;
            height: 40px;
            margin: 0 auto;
            border: none;
            font-size: 16px;
            border-radius: 5px;
            color: #ffffff;
            background: #f45cae;
        }

        .type_words {
            padding: 12px 20px;
        }

        @keyframes breath {
            0% {
                transform: scale3d(1, 1, 1);
                -webkit-transform: scale3d(1, 1, 1);
                transform-origin: 50% 50%;
            }

            50% {
                transform: scale3d(1.02, 1.02, 1.02);
                -webkit-transform: scale3d(1.02, 1.02, 1.02);
                transform-origin: 50% 50%;
            }

            100% {
                transform: scale3d(1, 1, 1);
                -webkit-transform: scale3d(1, 1, 1);
                transform-origin: 50% 50%;
            }
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#yes').click(function (event) {
                modal('我就知道你一定会愿意的。(^_^)', function () {
                    $('.page_one').addClass('hide');
                    $('.page_two').removeClass('hide');
                    //typeWrite();
                    fireworks();

                });
            });
            $('#no').click(function (event) {
                modal('明人不说暗话！', A);
            });
        });

        function A() {
            modal('我喜欢你！', B);
        }

        function B() {
            modal('我知道你在等我这一句话', C);
        }

        function C() {
            modal('请您不要拒绝我', D);
        }

        function D() {
            modal('拒绝我，不存在的', E);
        }

        function E() {
            modal('这辈子都不可能让你离开我', F);
        }

        function F() {
            modal('跟我走吧', G);
        }

        function G() {
            modal('房产证上写你名', H);
        }

        function H() {
            modal('我会做饭', I);
        }

        function I() {
            modal('爱你。么么哒！', J)
        }

        function J() {
            modal('行，我们去民政局登记吧', function () {
                fireworks();
            });
        }

        function fireworks() {
            $('.page_one').addClass('hide');
            $('.page_two').removeClass('hide');
            $('.page_two').fireworks({
                sound: true,
                opacity: 0.9,
                width: '100%',
                height: '100%'
            });
        }

        function modal(content, callback) {
            var tpl = '<div class="container">' +
                '<div class="mask"></div>' +
                '<div class="modal">' +
                '<p>' + content + '</p>' +
                '<button type="button" id="confirm" class="confirm">确定</button>' +
                '</div>' +
                '</div>';
            $('body').append(tpl);
            $(document).on('click', '.confirm', function () {
                $('.container').remove();
                callback();
            });
        }

        var myWords = '有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。';
        var x = 0;
        var speed = 150;
        var current = 0;

        function typeWrite() {
            $('.type_words').html(myWords.substring(0, x++) + '_');
            var timer = setTimeout("typeWrite()", speed);
            if (x == myWords.length) {
                x = myWords.length;
                clearTimeout(timer)
            }
        }

    </script>
</head>


<body style="">

<div class="share_img"><img src="./src/a8b.png" alt=""></div>

<div class="page_one">
    <div class="content">
        <div class="text_wrapper">
            <img src="./src/a8.png" alt="">
            <div class="text">
                洪雪，我好喜欢你，你愿意做嫁给我吗？
            </div>
        </div>
    </div>
    <div class="btn-groups">
        <div class="heart-btn">
            <div id="yes" class="btn btn-a"><span>愿意</span></div>
        </div>
        <div id="no" class="btn btn-b"><span>不愿意</span></div>
    </div>
</div>
<div class="page_two hide">
    <div class="type_words"></div>
</div>


</body>
</html>